<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	 <button class="btn1">建立连接</button>
	 <button class="btn2">发送消息</button>
	 <button class="btn3">关闭连接</button>
	 <script>
		//  1. 点击按钮要建立连接
		const btn1 = document.querySelector('.btn1')
		const btn2 = document.querySelector('.btn2')
		const btn3 = document.querySelector('.btn3')
		let ws
		btn1.onclick = function(){
			// 建立websocket连接
			// 1.和服务器建立连接并得到websocket实例
	    ws = new WebSocket('wss://echo.websocket.org')
			ws.onopen = function(){
				console.log('连接成功');
			}
			// 接收服务器的消息
			ws.onmessage=function(e){
				console.log(e.data); // e中的data是服务器发送给客户端的信息
			}
			// 监听是否关闭成功
			ws.onclose = function(){
				console.log('聊天终止,断开连接');
			}
		}
		btn2.onclick = function(){
			// 发送信息给服务器
			ws.send('挖来哇来来')
		}	 
		btn3.onclick = function(){
		  // 关闭连接
			ws.close()
		}	 
		</script>



<!-- 创建websocket实例 ws = new WebSocket('服务器地址')
		 监听是否连接成功  onopen 
		 客户端发送消息给服务端 ws.send('xxx')
		 接收服务端的消息 ws.onmessage = f   e.data 
		 断开 ws.close()
		 监听端口 ws.onclose = fn


-->

</body>
</html>